<template>
<div>
  <!-- <el-button @click="out">导出</el-button> -->
  <div class="outButton">
     <v-outPdf @exportPdf="out" ></v-outPdf>
  </div>
 

  <div class="contain"  ref="cont" style="width:100%">
    
    <div v-for="(item,index) in htmlData"  :key="item.title" :id="index+1" class="box" style="width:100%">
      <v-Card >
          <div slot="header">{{item.title}}</div>
          <div slot="main">{{item.content}}</div>
      </v-Card>
    </div>
  </div>
  
  </div>
</template>

<script>
// import Vue from 'vue'
import vCard from './card'
import vOutPdf from './outPdf.vue' 

export default {
  props: ['htmlData'],
  components: {
    vCard,
    vOutPdf
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      itemdata: [
        {
          title: '数据库基本信息',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: '表空间使用统计',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: '数据库后台日志',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: '数据库DBA权限用户',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: 'SQL语句执行与解析的比率',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: 'Parse CPU to Parse Elapsd',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: 'Non Parse CPU',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: '数据库总体运行性能（dbtime）',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: '回收站对象统计',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        },
        {
          title: '碎片检查',
          content: '我们的使用方式就是定义一个 tick 函数，让它执行一个逻辑/事件。然后使用 setTimeout 来加入一个延迟 16 毫秒后再执行一次自己。'
        }
      ],
      cont: ''
    }
  },
  methods: {
    init () {

    },
    out () {
      this.$emit('htmlData', this.$refs.cont.innerHTML)
    }
  }
}
</script>

<style scoped>
.cont {
    width: 100%;
}
.box {
    width: 100%;
}
.outButton {
  margin-bottom: 20px;
}
</style>
